<template>
    <div class="PersonalInformationArea">
        <div class="load">
            <br />

            <!-- 最上面的返回按钮和分享按钮 -->
            <van-row justify="space-between">
                <van-col span="6">
                    <van-icon @click="returnmine" name="arrow-left" size="20" />
                </van-col>
                <van-col span="2">
                    <van-icon
                        @click="shareout"
                        name="share1"
                        size="20"
                        class-prefix="my-icon"
                    />
                </van-col>
            </van-row>

            <!-- 头像 -->
            <van-row justify="center">
                <van-uploader
                    v-model="fileList"
                    multiple
                    :deletable="false"
                    :max-count="1"
                />
            </van-row>

            <van-row justify="center" style="margin-top: 10px">
                {{ userInfo.nickname }}
            </van-row>

            <van-row
                style="padding-top: 9px"
                class="contentarea"
                justify="center"
            >
                <van-tag
                    style="padding: 6px"
                    round
                    plain
                    type="primary"
                    color="lightslategrey"
                    >男 · 湖北 武汉</van-tag
                >
            </van-row>

            <br />

            <div class="persionaltag">
                <van-row justify="space-between">
                    <van-col span="6"
                        ><span @click="onClickLeft" class="smallcon1"
                            >18时58分</span
                        ></van-col
                    >
                    <van-col span="5">
                        <span @click="onClickCenter" class="smallcon2"
                            >1个</span
                        ></van-col
                    >
                    <van-col span="3"
                        ><span @click="onClickRight" class="smallcon3"
                            >0人</span
                        ></van-col
                    >
                </van-row>

                <van-row justify="space-between">
                    <van-col span="6"
                        ><span class="smallcon4">读书时长</span></van-col
                    >
                    <van-col span="8">
                        <span class="smallcon5">收到的赞</span></van-col
                    >
                    <van-col span="5"
                        ><span class="smallcon6">关注我</span></van-col
                    >
                </van-row>
            </div>
            <br />
        </div>
    </div>

    <div class="PersonalInformationArea">
        <div class="load">
            <van-tabs
                color="blue"
                v-model:active="active"
                title-active-color="deepskyblue"
                @click-tab="onClickTab"
                animated
            >
                <van-tab title="书架">
                    <span
                        style="
                            display: flex;
                            justify-content: space-between;
                            padding: 0 10px;
                            font-size: x-small;
                            margin-top: 10px;
                            color: lightslategrey;
                            width: 100%;
                        "
                    >
                        <span>一个月前 开始阅读《重生之我真没想当男神》 </span>
                        <!-- 后面是那个爱心图标的显示状态切换 -->
                        <span v-show="befclick"
                            ><van-icon @click="cliredheart" name="like-o"
                        /></span>
                        <span v-show="clicked"
                            ><van-icon @click="cliredheart" name="like"
                        /></span>
                    </span>

                    <van-grid
                        :border="false"
                        :column-num="3"
                        v-if="shelfList.length"
                    >
                        <van-grid-item
                            v-for="item in shelfList.slice(0, 3)"
                            :key="item.id"
                        >
                            <div class="item">
                                <span class="img-warp">
                                    <img
                                        @click="
                                            ClickPic({
                                                id: item.id,
                                                title: item.title,
                                            })
                                        "
                                        :src="item.cover"
                                    />
                                </span>
                                <div class="title">
                                    <span
                                        style="
                                            font-size: small;
                                            font-weight: bold;
                                        "
                                        >{{ item.title }}</span
                                    >
                                </div>
                            </div>
                        </van-grid-item>
                    </van-grid>
                    <van-grid
                        :border="false"
                        :column-num="3"
                        style="
                            min-height: 100px;
                            color: var(--gray);
                            justify-content: center;
                            align-items: center;
                        "
                        v-else
                    >
                        <span>尚未添加图书至书架！</span>
                    </van-grid>
                </van-tab>

                <van-tab title="已读完 · 8">
                    <span
                        style="
                            display: flex;
                            justify-content: space-between;
                            padding: 0 10px;
                            font-size: x-small;
                            margin-top: 10px;
                            color: lightslategrey;
                            width: 100%;
                        "
                    >
                        <span>一个月前 开始阅读《重生之我真没想当男神》 </span>
                        <span v-show="befclick"
                            ><van-icon @click="cliredheart" name="like-o"
                        /></span>
                        <span v-show="clicked"
                            ><van-icon @click="cliredheart" name="like"
                        /></span>
                    </span>

                    <van-grid
                        :border="false"
                        :column-num="3"
                        v-if="shelfList.length"
                    >
                        <van-grid-item
                            v-for="item in shelfList.slice(0, 3)"
                            :key="item.id"
                        >
                            <div class="item">
                                <span class="img-warp">
                                    <img
                                        @click="
                                            ClickPic({
                                                id: item.id,
                                                title: item.title,
                                            })
                                        "
                                        :src="item.cover"
                                    />
                                </span>
                                <div class="title">
                                    <span
                                        style="
                                            font-size: small;
                                            font-weight: bold;
                                        "
                                        >{{ item.title }}</span
                                    >
                                </div>
                            </div>
                        </van-grid-item>
                    </van-grid>
                    <van-grid
                        :border="false"
                        :column-num="3"
                        style="
                            min-height: 100px;
                            color: var(--gray);
                            justify-content: center;
                            align-items: center;
                        "
                        v-else
                    >
                        <span>尚未添加图书至书架！</span>
                    </van-grid>
                </van-tab>
            </van-tabs>

            <van-button @click="lookbookshelf" size="large"
                >查看书架</van-button
            >
        </div>
        <span style="font-size: x-small; color: lightslategrey">
            <div style="text-align: center; margin-top: 20px">
                书架和阅读动态仅对关注我的人可见
            </div>
        </span>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { ref } from '@vue/reactivity'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import store from '../../store'
export default {
    setup() {
        const router = useRouter()
        const shelfList = computed(() => {
            return store.getters.shelfList
        })
        const userInfo = computed(() => {
            return JSON.parse(store.getters.userInfo)
        })
        const currentPage = ref(1)
        const befclick = ref(true)
        const clicked = ref(false)
        const active = ref(0)
        const onClickTab = ({ title }) => Toast(title)

        const fileList = ref([{ url: userInfo.value.avatar }])

        function returnmine() {
            router.push('/mine')
        }

        function shareout() {
            Toast('分享成功！')
        }

        function onClickLeft() {
            Toast('读书时长！')
        }

        function onClickCenter() {
            Toast('一个赞！')
        }

        function onClickRight() {
            Toast('无人关注！')
        }

        function clickhead() {
            Toast('我的头像！')
        }

        function lookbookshelf() {
            router.push({
                path: '/shelf',
            })
        }

        function ClickPic(option) {
            Toast(option.title)
            router.push(`/detail/${option.id}`) //传参？
        }

        function onClickbotleft() {
            Toast('点评')
        }

        function onClickbotright() {
            Toast('帖子')
        }

        function cliredheart() {
            if (befclick.value) {
                Toast('已喜欢')
            } else {
                Toast('已取消')
            }
            befclick.value = !befclick.value
            clicked.value = !clicked.value
        }

        return {
            returnmine,
            shareout,
            userInfo,
            onClickLeft,
            onClickCenter,
            onClickRight,
            clickhead,
            onClickbotleft,
            shelfList,
            onClickbotright,
            lookbookshelf,
            currentPage,
            ClickPic,
            cliredheart,
            befclick,
            clicked,
            active,
            onClickTab,
            fileList,
        }
    },
}
</script>

<style scoped lang="scss">
.persionaltag {
    position: relative;
    padding-left: 10%;
    padding-right: 10%;
    --van-padding-md:10
}
.PersonalInformationArea {
    padding-bottom: 6px;
    --van-padding-xs:0
    background-color: #f4f5f6;
    /* background-color: #ffffff; */
}
.load {
    background-color: #ffffff;
}
.contentarea {
    font-family: 'Times New Roman', Times, serif;
}
.bigcon {
    width: 100%;
    height: 55px;
    background-color: #ffffff;
}
.smallcon1 {
    /* font-size: 10px; */
    margin-left: 0%;
    background-color: #ffffff;
}
.smallcon2 {
    /* font-size: 10px; */
    /* margin-left: 22%; */
    background-color: #ffffff;
}
.smallcon3 {
    /* font-size: 10px; */
    /* margin-left: 30%; */
    background-color: #ffffff;
}
.smallcon4 {
    font-size: 10px;
    margin-left: 7%;
    color: lightslategrey;
    background-color: #ffffff;
}
.smallcon5 {
    font-size: 10px;
    margin-left: 22%;
    color: lightslategrey;
    background-color: #ffffff;
}
.smallcon6 {
    font-size: 10px;
    margin-left: 30%;
    color: lightslategrey;
    background-color: #ffffff;
}
.navcolor {
    --van-nav-bar-text-color: black;
}
.navboder {
    --van-nav-bar-height: 25px;
    --van-nav-bar-text-color: black;
}

.title{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.van-grid-item{
    min-width: 0;
}


.item{
    width: 100%;
    display: flex;
    flex-direction: column;
    .img-warp{
        display: inline-block;
        width: 100%;
        overflow: hidden;
    }
}
</style>
